<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-button @click="deleteMore" type="primary" size="mini" icon="el-icon-delete" circle></el-button>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2">
                    </el-input>
                </el-col>
            </el-row>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="userName" label="用户名" width="120">
                </el-table-column>
                <el-table-column prop="comments" label="电话" width="width">
                </el-table-column>
                <el-table-column prop="普通用户" label="角色" width="120">
                </el-table-column>
                <el-table-column prop="enable" label="有效" width="width">
                    <svg v-show="!enable" t="1656037588889" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2353" width="16" height="16">
                        <path
                            d="M512 0C228.266667 0 0 228.266667 0 512c0 283.733333 228.266667 512 512 512 283.733333 0 512-228.266667 512-512C1024 228.266667 795.733333 0 512 0zM832 384 492.8 723.2C469.333333 746.666667 426.666667 746.666667 403.2 723.2L192 512c0 0-32-32 0-64s64 0 64 0l192 192 320-320c0 0 32-32 64 0S832 384 832 384z"
                            p-id="2354" fill="#1afa29"></path>
                    </svg>
                    <svg v-show="enable" t="1656037683994" class="icon" viewBox="0 0 1028 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5916" width="16" height="16">
                        <path
                            d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z"
                            p-id="5917" fill="#d81e06"></path>
                    </svg>
                </el-table-column>
                <el-table-column prop="date" label="注册时间" width="120">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="width">
                </el-table-column>
                <el-table-column prop="comments" label="积分" width="width">
                </el-table-column>
                <el-table-column label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button @click="fixRow(row)" type="primary" size="mini" circle icon="el-icon-edit-outline">
                        </el-button>
                        <el-button @click="removeRow(row)" type="warning" size="mini" circle icon="el-icon-delete">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //paginamtion -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageInfo.current" :page-sizes="[3, 5, 10]" :page-size="pageInfo.pageSize"
                layout="sizes, prev, pager, next" :total="pageInfo.totalItems">
            </el-pagination>
        </el-card>
        <!-- //对话框 -->
        <el-dialog title="完善用户信息" :visible.sync="dialogVisible" width="50%">
            <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="用户名">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="头像" size="normal">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.logo" :src="form.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="角色" size="normal">
                    <el-radio v-model="form.group" label="0">普通用户</el-radio>
                </el-form-item>
                <el-form-item label="有效" size="normal">
                    <el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="电话" size="normal">
                    <el-input v-model="form.phoneNum">
                    </el-input>
                </el-form-item>
                <el-form-item label="邮箱" size="normal">
                    <el-input placeholder="doramart@qq.com" v-model="form.email" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注" size="normal">
                    <el-input type="textarea" :rows="2" v-model="form.comments">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="UpdateRow">更新</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import { reqGetList, reqDeleteUser, reqUpdateOne, reqDelete, reqGetOne } from '@/api/regUser'
export default {
    name: '',
    data() {
        return {
            input2: "",
            dialogVisible: false,
            tableData: [],
            multipleSelection: [],
            pageInfo: {
                current: 1,
                pageSize: 10,
                searchkey: "",
                totalItems: 43,
                totalPage: 5
            },
            form: {
                userName: '',
                logo: "",
                enable: '',
                comments: "",
                email: "doramart@qq.com",
                enable: '',
                group: "0",
                name: "",
                phoneNum: "",
                userName: "",
                _id: "",
            },
            rules: {},
            radio: '0',
            value: "",
            input: "",
            textarea: '',
            enable:''
        }
    },
    mounted() {
        //挂载页面数据
        this.getList()
    },
    methods: {
        //挂载页面数据
        async getList() {
            let result = await reqGetList()
            this.tableData = result.data.docs
            this.pageInfo = result.data.pageInfo
        },
        //删除
         deleteMore() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    var multi = this.multipleSelection.toString()
                    await reqDeleteUser({ ids: multi })
                    //挂载页面数据
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });        
         },
        //修改
        async fixRow(row) {
                await reqGetOne()
                console.log(row);
                this.dialogVisible = true
                this.form.userName = row.userName
                this.form.logo = row.logo
                this.form.enable = row.enable
                this.form._id = row._id
            },
        async UpdateRow() {
                const { email, name, comments, group, enable, userName, phoneNum, _id, logo } = this.form
                let result = await reqUpdateOne({ email, name, comments, group, enable, userName, phoneNum, _id, logo })
                if (result.status == 200) {
                    this.$message({ type: 'success', message: '修改成功' })
                    //挂载页面数据
                    this.getList()
                    this.dialogVisible = false
                }
            },
        //删除 
        async removeRow(row) {
                await reqDelete({ ids: row.id })
                //挂载页面数据
                this.getList()
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                // console.log(val);
                val.forEach((item) => {
                    if (this.multipleSelection.indexOf(item.id) == -1) {
                        this.multipleSelection.push(item.id)
                    }
                })
                // console.log( this.multipleSelection);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleAvatarSuccess(res, file) {
                this.form.logo = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        }
    } 
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>    